<!DOCTYPE html>
<html>
<head>
    <title>首页</title>
    {% include 'admin/common/header.html' %}
    <link rel="stylesheet" href="{{ url_for('static', filename='/admin/admin/css/other/console2.css') }}"/>
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
    <div class="layui-col-md8">
        <div class="layui-row layui-col-space10">
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">
                        动作规范情况
                    </div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space10">
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">合格人次最多动作</div>
                                    <div class="count pear-text">出拳</div>
                                </div>
                            </div>
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">合格人次最少动作</div>
                                    <div class="count pear-text">踢腿</div>
                                </div>
                            </div>
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">预测准确性得分</div>
                                    <div class="count pear-text">100</div>
                                </div>
                            </div>
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">预测准确率</div>
                                    <div class="count pear-text">71%</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">
                        检测情况
                    </div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space10">
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">目前检测最高得分</div>
                                    <div class="count pear-text">44</div>
                                </div>
                            </div>
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">平均检测人数</div>
                                    <div class="count pear-text">8</div>
                                </div>
                            </div>
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">单次检验动作</div>
                                    <div class="count pear-text">3个</div>
                                </div>
                            </div>
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">平均检测时间</div>
                                    <div class="count pear-text">2:10</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">近五次检测合格结果</div>
                    <div class="layui-card-body">
                        <div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                            <div id="echarts-records" style="background-color:#ffffff;min-height:600px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md4">
       <!-- 
            <div class="layui-card">
            <div class="layui-card-header">磁盘信息</div>
            <div class="layui-card-body">
                <ul class="pear-card-status">
                    {% for i in disk_partitions_list %}
                        <li>
                            <p>{{ i.device }}</p>
                            <p>{{ i.fstype }}</p>
                            磁盘大小&nbsp;<span>{{ i.total }}M</span>&nbsp;&nbsp;
                            空闲大小&nbsp;<span>{{ i.free }}M</span>&nbsp;&nbsp;
                            <br/>
                            <br/>
                            已经使用&nbsp;<span>{{ i.used }}M</span>&nbsp;&nbsp;
                            使用概率&nbsp;<span>{{ i.percent }}%</span>
                            <br/>
                            <a href="javascript:;" data-id="1" class="pear-btn pear-btn-xs pear-btn-primary pear-reply">详情</a>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div> 
        -->
        <div class="layui-card">
            <div class="layui-card-header">检测信息</div>
            <div class="layui-card-body">
                <table class="layui-table" lay-skin="line",style="min-height:500px">
                    <thead>
                    <tr>
                        <th>参检人数</th>
                        <th>80</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <th>得分最高人员</th>
                        <th>帅小伙</th>
                    </tr>    
                    <tr>
                        <th>得分最低人员</th>
                        <th>丑小伙</th>
                    </tr>
                    <tr>
                        <td>考核成绩合格人数</td>
                        <td>76</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <!--<div class="layui-card">
            <div class="layui-card-header">监考人员情况</div>
            <div class="layui-card-body">
                <table class="layui-table" lay-skin="line",style="min-height:500px">
                    <thead>
                    <tr>
                        <th>监考人数</th>
                        <th>100</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <th>监考人员出勤率</th>
                    </tr>    
                    <tr>
                        <td>作弊场次</td>
                        <td>{{ hostname }}</td>
                    </tr>
                    <tr>
                        <td>监考时间</td>
                        <td>{{ system_version }}</td>
                    </tr>
                    <tr>
                        <td>监考科目</td>
                        <td>{{ boot_time }}</td>
                    </tr>

                    </tbody>
                </table>
            </div>
        </div>
            <div class="layui-card">
                <div class="layui-card-header">考试场次信息</div>
                <div class="layui-card-body">
                    <div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                        <div id="echarts-testrecords" style="background-color:#ffffff;min-height:800px;"></div>
                    </div>
                </div>
            </div>
        </div>  -->
    </div>
</div>
{% include 'admin/common/footer.html' %}
<script>
    layui.use(['layer', 'echarts', 'element', 'count'], function () {
        var app = {};
        var chartDom = document.getElementById('echarts-records');
        var myChart = echarts.init(chartDom);
        var option;
        const posList = [
        'left',
        'right',
        'top',
        'bottom',
        'inside',
        'insideTop',
        'insideLeft',
        'insideRight',
        'insideBottom',
        'insideTopLeft',
        'insideTopRight',
        'insideBottomLeft',
        'insideBottomRight'
        ];
        app.configParameters = {
        rotate: {
            min: -90,
            max: 90
        },
        align: {
            options: {
            left: 'left',
            center: 'center',
            right: 'right'
            }
        },
        verticalAlign: {
            options: {
            top: 'top',
            middle: 'middle',
            bottom: 'bottom'
            }
        },
        position: {
            options: posList.reduce(function (map, pos) {
            map[pos] = pos;
            return map;
            }, {})
        },
        distance: {
            min: 0,
            max: 100
        }
        };
        app.config = {
        rotate: 90,
        align: 'left',
        verticalAlign: 'middle',
        position: 'insideBottom',
        distance: 15,
        onChange: function () {
            const labelOption = {
            rotate: app.config.rotate,
            align: app.config.align,
            verticalAlign: app.config.verticalAlign,
            position: app.config.position,
            distance: app.config.distance
            };
            myChart.setOption({
            series: [
                {
                label: labelOption
                },
                {
                label: labelOption
                },
                {
                label: labelOption
                },
                {
                label: labelOption
                }
            ]
            });
        }
        };
        const labelOption = {
        show: true,
        position: app.config.position,
        distance: app.config.distance,
        align: app.config.align,
        verticalAlign: app.config.verticalAlign,
        rotate: app.config.rotate,
        formatter: '{c}  {name|{a}}',
        fontSize: 16,
        rich: {
            name: {}
        }
        };
        option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
            type: 'shadow'
            }
        },
        legend: {
            data: ['Forest', 'Steppe', 'Desert', 'Wetland']
        },
        toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar', 'stack'] },
            restore: { show: true },
            saveAsImage: { show: true }
            }
        },
        xAxis: [
            {
            type: 'category',
            axisTick: { show: false },
            data: ['1', '2', '3', '4', '5']
            }
        ],
        yAxis: [
            {
            type: 'value'
            }
        ],
        series: [
            {
            name: '徒手格挡',
            type: 'bar',
            barGap: 0,
            label: labelOption,
            emphasis: {
                focus: 'series'
            },
            data: [32, 33, 30, 33, 39]
            },
            {
            name: '徒手戒备',
            type: 'bar',
            label: labelOption,
            emphasis: {
                focus: 'series'
            },
            data: [22, 18, 19, 23, 29]
            },
            {
            name: '徒手控制',
            type: 'bar',
            label: labelOption,
            emphasis: {
                focus: 'series'
            },
            data: [15, 23, 20, 15, 19]
            }
            // {
            //   name: 'Wetland',
            //   type: 'bar',
            //   label: labelOption,
            //   emphasis: {
            //     focus: 'series'
            //   },
            //   data: [28, 17, 10, 19, 20]
            // }
        ]
        };
        myChart.setOption(option);
        });
</script>
<script>
    layui.use(['layer', 'echarts', 'element', 'count'], function () {
        var chartDom = document.getElementById('echarts-testrecords');
        var myChart = echarts.init(chartDom);
        var option;
        
        option = {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                crossStyle: {
                  color: '#999'
                }
              }
            },
            toolbox: {
              feature: {
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
              }
            },
            legend: {
              data: ['考试人数', '监考人数', '后勤人员']
            },
            xAxis: [
              {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                axisPointer: {
                  type: 'shadow'
                }
              }
            ],
            yAxis: [
              {
                type: 'value',
                name: 'Precipitation',
                min: 0,
                max: 250,
                interval: 50,
                axisLabel: {
                  formatter: '{value} 人次'
                }
              },
              {
                type: 'value',
                name: 'Temperature',
                min: 0,
                max: 25,
                interval: 5,
                axisLabel: {
                  formatter: '{value} 人次'
                }
              }
            ],
            series: [
              {
                name: '考试人数',
                type: 'bar',
                tooltip: {
                  valueFormatter: function (value) {
                    return value + ' 人次';
                  }
                },
                data: [
                  2, 4, 7, 23, 25, 76, 135, 162, 32, 20, 6, 3
                ]
              },
              {
                name: '监考人数',
                type: 'bar',
                tooltip: {
                  valueFormatter: function (value) {
                    return value + ' 人次';
                  }
                },
                data: [
                  2, 5, 9, 26, 28, 70, 175, 182, 48, 18, 6, 2
                ]
              },
              {
                name: '平均得分',
                type: 'line',
                yAxisIndex: 1,
                tooltip: {
                  valueFormatter: function (value) {
                    return value + ' 人次';
                  }
                },
                data: [2, 2, 3, 4, 6, 10, 20, 23, 23, 16, 12, 6]
              }
            ]
          };
          myChart.setOption(option);
        });
</script>
</body>
</html>